<template>
  <div>
    <!-- 领取明细 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors">/<img :src="require('/src/assets/img/service.png')" />任务管理</b>
      <router-link to="/ListTask">
      <b><span class="fenge">/</span>任务列表</b>
      </router-link>
      <b><span class="fenge">/</span>领取明细</b>
    </div>
    <el-card class="cardTits" shadow="hover">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        ref="multipleTable"
        @sort-change="sortChange"
      >
        <el-table-column type="index" sortable="custom" label="序号" align="center" width="70"> </el-table-column>
        <el-table-column prop="name" sortable="custom" label="任务名称" width=""> </el-table-column>
        <el-table-column prop="taskPayment" sortable="custom" label="服务款" width="">
          <template #default="item">
            {{ formatNumber(item.row.taskPayment) }}
          </template>
        </el-table-column>
        <el-table-column prop="legalName" sortable="custom" label="任务接收人" width="">
        </el-table-column>
        <el-table-column prop="legalPhone" sortable="custom" label="任务接收人手机号" width="150"></el-table-column>
        <el-table-column prop="takeStatus" label="是否领取" align="center" width="">
          <template #default="item">
            {{ takeStatus[item.row.takeStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="isComplete" label="是否完成" align="center" width="">
          <template #default="item">
            {{ isComplete[item.row.isComplete] }}
          </template>
        </el-table-column>
        <el-table-column prop="bonus" sortable="custom" label="奖励" width="">
          <template #default="item">
            {{ formatNumber(item.row.bonus) }}
          </template>
        </el-table-column>
        <el-table-column prop="fine" sortable="custom" align="center" label="惩罚">
          <template #default="item">
            {{ formatNumber(item.row.fine) }}
          </template>
        </el-table-column>
        <el-table-column prop="expectProfit" sortable="custom" align="center" label="预计服务款">
          <template #default="item">
            {{ formatNumber(item.row.expectProfit) }}
          </template>
        </el-table-column>
        <el-table-column prop="inspectedStatus" align="center" label="验收状态">
          <template #default="item">
            {{ inspectedStatus[item.row.inspectedStatus] }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "ReceiveDetails",
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      isComplete: { // 是否完成
        2: '放弃',
        1: '是',
        0: '否',
      },
      takeStatus: { // 承接状态 0;未承接 1:
        1: '是',
        0: '否',
      },
      inspectedStatus: { // 验收状态 0：待验收 1：验收通过 2：验收驳回
        2: '验收驳回',
        1: '验收通过',
        0: '待验收',
      },
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      tableData: [],
    };
  },
  components: {},
  mounted() {
    this.getReceiveList()
  },
  watch: {
    $route(d){
      if(d.name == "ReceiveDetails") {
        this.getReceiveList()
      }
    }
  },
  methods: {
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d
      this.getReceiveList()

    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d
      this.getReceiveList()
    },
    getReceiveList() {
      // 获取明细列表信息
      this.$http({
        url: "/api/quick/business/task/taskDrawDetail",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          taskId: this.$route.query.id,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
        },
      }).then((data) => {
        if (data.code == 0) {
          this.tableData = data.result.list
          this.total = data.result.total
        }
      });
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "legalName" || d.prop == "name") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getReceiveList()
    },
  },
};
</script>